/*************************/
/*		OWL ANIMATION	 */
/*************************/

body {
	background-color:black;
}

#stage {
	width:900px;
	height:900px;
	overflow:hidden;
	outline:white 1px solid;
	position:relative;
	background-color:black;
	/*-webkit-mask-image:url(images/mask.png) ;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 40px 40px;
	cursor:none;
	--webkit-mask*/
}

.mask {
	-webkit-mask-image:url(images/mask.png) ;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 40px 40px;
	cursor:none;
	background-color:white;
}

#owlBody {
	background:url(images/owlBody.png) no-repeat;
	width:295px;
	height:301px;
	margin-top:-50px;
}

#owlHead {
	background:url(images/owlHead.png) no-repeat;
	width:244px;
	height:188px;
	top:0;
	left:20px;
	xmargin:20px 0 0 20px;
	z-index:100;
	position:relative;
}

.eyeLg {
	width:121px;
	height:110px;
	margin-top:50px;
	float:left;
}

#leftEye {
	background:url(images/l_eye_lg.png) no-repeat;
}

#rightEye {
	background:url(images/r_eye_lg.png) no-repeat;
}

#leftEyeSm {
	background:url(images/l_eye_sm.png) no-repeat;
	
}

#rightEyeSm {
	background:url(images/r_eye_sm.png) no-repeat;
	
}

.pupil {
	background:url(images/pupil.png) no-repeat;
	z-index:400;
	position:relative;
	width:68px;
	height:71px;
	top:50px;
	left:50px;
  	/*animation:eyesMove 2s;
	-moz-animation:eyesMove 2s; 
	-webkit-animation:eyesMove 2s;
	-webkit-animation-iteration-count: infinite;*/
  	outline:blue 1px solid;
}

.wings {
	width:63px;
	height:163px;
	position:relative;
	float:left;
	outline:red 1px solid;
}

#leftWing {
	background:url(images/left_wing.png) no-repeat;
	top:10px;
	left:20px;
  	-webkit-transform-origin: right top;

}

#rightWing {
	background:url(images/right_wing.png) no-repeat;
	top:10px;
	left:140px;
  	-webkit-transform-origin: left top;

}


#owl {
	top:300px;
	position:relative;
	animation:hop 2s;
	-moz-animation:hop 2s; /* Firefox */
	-webkit-animation:hop 2s; /* Safari and Chrome */
	-webkit-animation-iteration-count: infinite;
	width:400px;
	margin:0 auto;
}

#leftWing {
	-webkit-animation-name: flapWingL;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}

#rightWing {
	-webkit-animation-name: flapWingR;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}

#spot {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	xbackground:url(images/spotlight.png);
	z-index:300;
}

@-webkit-keyframes hop
{
0%   {left:0px; top:300px;}
50%  {left:0px; top:150px;}
100% {left:0px; top:300px;}
}

@-moz-keyframes hop /* Firefox */
{
0%   {left:0px; top:300px;}
50%  {left:0px; top:150px;}
100% {left:0px; top:300px;}
}

@-webkit-keyframes hop /* Safari and Chrome */
{
0%   {left:0px; top:300px;}
50%  {left:0px; top:150px;}
100% {left:0px; top:300px;}
}

@-webkit-keyframes flapWingL {
   0% { -webkit-transform: rotate(90deg); }
   100% { -webkit-transform: rotate(0); }
}

@-webkit-keyframes flapWingR {
   0% { -webkit-transform: rotate(-90deg); }
   100% { -webkit-transform: rotate(0); }
}

@-webkit-keyframes eyesMove
{
0%   {left:0px; top:30px;}
50%  {left:0px; top:15px;}
100% {left:0px; top:30px;}
}

@-moz-keyframes eyesMove /* Firefox */
{
0%   {left:0px; top:30px;}
50%  {left:0px; top:15px;}
100% {left:0px; top:30px;}
}

@-webkit-keyframes eyesMove /* Safari and Chrome */
{
0%   {left:0px; top:30px;}
50%  {left:0px; top:15px;}
100% {left:0px; top:30px;}
}